
<template>
  <div>111</div>
</template>
           
<script>
// eslint-disable-next-line no-unused-vars
import icon from "./icon";
// eslint-disable-next-line no-unused-vars
import FooTer from "@/components/FooTer.vue";
import skin from "@/views/skin/skin.vue";
import HomeComponents from "@/views/HomeComponents/HomeComponents.vue";
export default {
  data() {
    return {
      user: "FooTer",
      isCollapse: true,
      value: true,
      height: "200px",
      type: "el-icon-s-fold",
      input: "",
      showSearch: false,
      AvatarShow: false,
      currentTabComponent: "HomeComponents",
      ComponentShow:true
    };
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    icon,
    // eslint-disable-next-line vue/no-unused-components
    FooTer,
    // eslint-disable-next-line vue/no-unused-components
    skin,
    // eslint-disable-next-line vue/no-unused-components
    HomeComponents
  },
    watch: {
        currentTabComponent(val, newval) {
        // eslint-disable-next-line no-console
        console.log(val)
        // eslint-disable-next-line no-console
        console.log(newval)
        this.ComponentShow = false
         

      }
     
	},
  created() {},
  methods: {
    handleOpen() {},
    handleClose() {},
    //控制菜单缩放
    swh() {
      // eslint-disable-next-line no-console
      console.log(this.$route.path);
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.type = "el-icon-s-unfold";
      } else {
        this.type = "el-icon-s-fold";
      }
    },
    SearchShow() {
      this.showSearch = !this.showSearch;
    },
    //失去焦点
    LoseFocus() {
      this.showSearch = false;
    },
    Avatar() {
      this.AvatarShow = !this.AvatarShow;
    },
    // 推出登录
    balack() {
      alert("ok");
      localStorage.setItem("login", JSON.stringify(false));
      this.$router.push("/");
    }
  }
};
</script>
<style lang='scss'  scoped>
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tac {
  line-height: 0;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.img-box {
  width: 300px;
  height: 200px;
  background-color: lawngreen;
  position: relative;
}

.Header {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.Header-nav-botton {
  height: 34px;
  flex: 1;
  // background-color: darkblue;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.Header-nav-top {
  height: 34px;
  flex: 1;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.Header-nav-let {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  line-height: 34px;
}
.Header-nav-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 40%;
  justify-content: flex-end;
  height: 30px;
}
.el-icon-s-fold,
.el-icon-s-unfold {
  font-size: 37px;
  font-weight: 300;
  height: 100%;
  background-color: #fff;
}
.default_Home {
  color: #e9eef3;
  line-height: 37px;
}
.For-the-first-time-Home {
  line-height: 37px;
  color: #b3c0d1;
}
@media screen and (max-width: 414px) {
  .Heraer-Show {
    display: none;
    overflow: hidden;
  }
}
.search-box {
  height: 100%;

  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
}

.el-icon-search {
  font-size: 30px;
}
>>> .el-input__inner {
  width: 200px;
  height: 29px;
  margin: 0px 5px;
}
.slide-fade-enter-active {
  transition: all 1s ease;
}
.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(100px);
  opacity: 0;
}

/* 放大 */
.amplification {
  width: 25px;
  height: 25px;
  margin: 0 20px;
}
/* 语言icon */
.Language-icon {
  width: 30px;
  height: 30px;
}
.Language-Box {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
}
.Avatar {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  margin: 0 10px;
}
.Avatar > img {
  width: 100%;
  height: 100%;
}
.transition-box {
  width: 100px;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.7);

  color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: -96px;
  z-index: 999;
  -webkit-transition: 0.7s all;
  transition: 0.7s all;
  margin-top: 173px;
}
.ToLong,
.User {
  width: 100%;
  height: 30px;
  font-size: 15px;
  font-family: "Courier New", Courier, monospace;
  letter-spacing: 3px;
  line-height: 30px;
  margin: 10px 0px;
  text-align: center;
  color: #fff;
}
.ToLong:hover {
  color: firebrick;
}
.User:hover {
  color: aqua;
}
.el-menu--collapse {
  width: 40px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 120px;
  min-height: 400px;
}

.JumpAnimation-enter-active {
   transition: all 3s ease;
}
.JumpAnimation-leave-active {
      transition: all 3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.JumpAnimation-enter, .JumpAnimation-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>